<template>
  <el-container class="login-container">
    <el-header>
    </el-header>
    <el-main>
      <div class="login-form">
        <el-form :model="loginForm" ref="loginForm" :rules="rules" label-width="100px" class="form">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" placeholder="请输入用户名" clearable prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" placeholder="请输入密码" clearable show-password
              prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="button-container">
              <el-button type="primary" size="large" round @click="handleLogin">登录</el-button>
              <el-button size="large" plain @click="resetForm">重置</el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <div class="button-container">
              <el-button type="default" @click="goBack">返回</el-button> <!-- 新增返回按钮 -->
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { login } from "@/api/login";

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 登录方法
    async handleLogin() {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          try {
            const payload = {
              username: this.loginForm.username,
              password: this.loginForm.password
            };
            console.log(payload);
            const response = await login(payload, {
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              }
            });
            const userInfo = response;
            localStorage.setItem("userSession", JSON.stringify(userInfo));
            this.$message.success("登录成功！");
            this.$router.push({ name: "Welcome" }); // 登录成功后跳转到主页
            this.refreshPage(); // 调用刷新页面的方法
          } catch (error) {
            this.$message.error("用户名或密码错误，请重试！");
          }
        } else {
          this.$message.error("请完善用户名和密码！");
        }
      });
    },
    refreshPage() {
    window.location.reload();
    },
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
    goBack() {
      this.$router.push({ name: 'Welcome' }); // 返回到欢迎页面
    },
  },
};
</script>

<style scoped>
.login-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('../assets/color1.png');
  /* 背景图像 */
  background-size: cover;
  /* 背景图像铺满整个容器 */
  background-repeat: no-repeat;
  /* 背景图像不重复 */
  background-position: center;
  /* 将图像居中显示 */
}

.header-title {
  margin-bottom: 20px;
  font-size: 28px;
  color: #ffffff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.login-form {
  width: 400px;
  background: #ffffff;
  padding: 40px 30px;
  /* 上下和左右的 padding  */
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.el-form-item {
  margin-bottom: 20px;
  /* 增加表单项间距 */
}

.button-container {
  display: flex;
  /* 使用 Flexbox */
  justify-content: center;
  /* 按钮在水平方向上居中 */
  gap: 10px;
  /* 按钮之间的间距 */
}

.el-input {
  font-size: 16px;
}

.el-button {
  width: 100%;
}

.el-button[type="primary"] {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  transition: all 0.3s ease;
}

.el-button[type="primary"]:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.el-button[plain] {
  color: #409eff;
  border-color: #409eff;
  transition: all 0.3s ease;
}

.el-button[plain]:hover {
  background-color: #ecf5ff;
  border-color: #66b1ff;
}
</style>